<template>
  <div class="item-ranking">
    <div class="list">
      <div class="list-top">
        <div class="song">歌曲</div>
        <div class="singer">歌手</div>
        <div class="timer">时长</div>
      </div>
      <div class="item" v-for="(item, index) of data" :key="item.id">
        <span>{{ index + 1 }}</span>
        <div class="music">
          <img v-lazy="item.al.picUrl" alt="" />
          <div class="bot">
            <a href="##" @click="handleClick(item.id)">{{
              item.al.name | handleString
            }}</a>
            <div class="box">
              <a href="##">
                <span
                  class="iconfont icon-jiahao"
                  @click="handlePaly(item)"
                ></span
              ></a>
              <a href="##">
                <span
                  class="iconfont icon-xiai"
                  @click="handleCollect(item)"
                ></span
              ></a>
            </div>
          </div>
        </div>
        <div class="singer">{{ item.ar[0].name }}</div>
        <div class="timer">{{ item.dt | handleTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  methods: {
    handleClick(val) {
      this.$router.push(`/play?id=${val}`);
    },
    handlePaly(val) {
      console.log(val);
      this.$https.post("/playmusic", { val }).then((res) => {
        // console.log(res);
        if (res.data.code == 400) {
          this.$message({
            showClose: true,
            message: "已经添加，请不要重复添加",
          });
        }
        this.$bus.$emit('shuaxin')
      });
      //window.location.reload();
      // this.$emit('playMusic',JSON.parse(JSON.stringify(val)))
      // this.$store.commit('playMusic',JSON.parse(JSON.stringify(val)))
    },
    handleCollect(val) {
      console.log(val);
      this.$https.post("/musiccollect", { val }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.item-ranking {
  margin-top: 15px;
  margin-left: 80px;
}
.list {
  background-color: #f1f1f1;
  border-radius: 20px;
}
.list-top {
  display: flex;
  line-height: 50px;
}
.song {
  margin-left: 80px;
  width: 500px;
  font-size: 14px;
}
.singer {
  width: 200px;
  font-size: 14px;
}
.timer {
  width: 80px;
  font-size: 14px;
  color: #999;
}
.item {
  display: flex;
  line-height: 80px;
}
.item span {
  text-align: center;
  width: 80px;
  font-size: 14px;
  color: #999;
}
.music {
  display: flex;
  align-items: center;
  width: 500px;
}
.music img {
  width: 70px;
  height: 70px;
}
.music > div {
  width: 400px;
  margin-left: 30px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}
.bot a:hover {
  color: #abc4ff;
}
.item:nth-child(2n) {
  background-color: #f7f7f7;
}
.box {
  width: 70px;
  /* text-align: right; */
  display: none;
}
.item:hover .box {
  display: block;
}
.box span {
  margin-left: 10px;
}
.box .icon-jiahao:hover {
  color: #abc4ff;
}
.box .icon-xiai:hover {
  color: red;
}
</style>